<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search-box">
      <input type="text" v-model="searchText" class="search-input" placeholder="搜索文章...">
    </div>

    <!-- 轮播图 -->
    <div class="banner">
      <div v-for="(banner, index) in banners"
           :key="index"
           class="banner-item"
           :style="{transform: `translateX(${100 * (index - currentBanner)}%)`}">
        <img :src="banner.image" :alt="banner.title">
      </div>
    </div>

    <!-- 分类按钮 -->
    <div class="category-container">
      <span v-for="category in categories"
            :key="category.id"
            class="category-btn"
            :class="{ active: currentCategory === category.id }"
            @click="changeCategory(category.id)">
        {{ category.name }}
      </span>
    </div>

    <!-- 文章列表 -->
    <div class="article-list">
      <div v-for="article in filteredArticles"
           :key="article.id"
           class="article-item"
           @click="goToDetail(article.id)">
        <!-- 普通文章 -->
        <template v-if="article.type === 'normal'">
          <div class="article-content">
            <div class="article-main">
              <h3 class="article-title">{{ article.title }}</h3>
              <p class="article-desc">{{ article.description }}</p>
            </div>
            <div class="article-image">
              <img :src="article.image" :alt="article.title">
            </div>
          </div>
          <div class="article-stats">
            <span class="stat-item">
              <i class="fas fa-eye"></i>
              <span>浏览 {{ article.views }}</span>
            </span>
            <span class="stat-item">
              <i class="fas fa-comment"></i>
              <span>回复 {{ article.replies }}</span>
            </span>
            <span class="stat-item">
              <i class="fas fa-clock"></i>
              <span>{{ article.publishTime }}</span>
            </span>
          </div>
        </template>

        <!-- 视频文章 -->
        <template v-else-if="article.type === 'video'">
          <div class="video-content">
            <h3 class="article-title">{{ article.title }}</h3>
            <div class="video-preview">
              <img :src="article.videoCover" alt="视频封面">
              <div class="play-icon">▶</div>
              <video class="video-player" :src="article.videoUrl"></video>
            </div>
            <div class="article-stats">
              <span class="stat-item">
                <i class="fas fa-eye"></i>
                <span>浏览 {{ article.views }}</span>
              </span>
              <span class="stat-item">
                <i class="fas fa-comment"></i>
                <span>回复 {{ article.replies }}</span>
              </span>
              <span class="stat-item">
                <i class="fas fa-clock"></i>
                <span>{{ article.publishTime }}</span>
              </span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchText = ref('')
const currentBanner = ref(0)
const currentCategory = ref('all')

// 模拟数据
const banners = ref([
  { id: 1, image: '/src/assets/img/phone/a.jpg', title: 'Banner 1' },
  { id: 2, image: '/src/assets/img/phone/b.jpg', title: 'Banner 2' },
  { id: 3, image: '/src/assets/img/phone/c.jpg', title: 'Banner 3' }
])

const categories = ref([
  { id: 'all', name: '全部' },
  { id: 'tech', name: '技术' },
  { id: 'life', name: '生活' },
  { id: 'entertainment', name: '娱乐' },
  { id: 'game', name: '游戏' }
])

const articles = ref([
  {
    id: 1,
    type: 'normal',
    title: '这是一篇普通文章的标题',
    description: '这，让用户快速了解文章内容...',
    views: 1234,
    replies: 56,
    publishTime: '2小时前',
    image: '/src/assets/img/phone/d.png',
    category: 'tech'
  },
  {
    id: 2,
    type: 'video',
    title: '这是一篇视频文章的标题',
    views: 5678,
    replies: 90,
    publishTime: '1天前',
    videoCover: '/src/assets/img/phone/d.png',
    videoUrl: 'video.mp4',
    category: 'entertainment'
  }
  // 更多文章...
])

// 计算属性：过滤后的文章列表
const filteredArticles = computed(() => {
  return articles.value
      .filter(article => {
        const matchCategory = currentCategory.value === 'all' || article.category === currentCategory.value
        const matchSearch = article.title.toLowerCase().includes(searchText.value.toLowerCase())
        return matchCategory && matchSearch
      })
})

// 切换分类
const changeCategory = (categoryId) => {
  currentCategory.value = categoryId
}

// 跳转到详情页
const goToDetail = (articleId) => {
  router.push(`/article/${articleId}`)
}

// 自动轮播
onMounted(() => {
  setInterval(() => {
    currentBanner.value = (currentBanner.value + 1) % banners.value.length
  }, 5000)
})
</script>

<style scoped>
@import "@/assets/css/all.min.css";

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.search-box {
  width: 100%;
  padding: 5px 0;
  text-align: center;
}

.search-input {
  width: 90%;
  padding: 8px 15px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 15px;
}

.banner {
  width: 100%;
  height: 150px; /* 改为更扁平的高度 */
  position: relative;
  overflow: hidden;
  margin: 15px 0;
}

.banner-item {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 0.5s;
}

.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  margin: 10px 0;  /* 减少分类按钮上下间距 */
  padding: 5px 0;
}

.category-btn {
  display: inline-block;
  padding: 1px 20px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
}

.category-btn.active {
  background-color: #ffffff;
  color: #0b8ae8;
}

.article-list {
  display: grid;
  gap: 20px;
}

.article-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.article-item:hover {
  transform: translateY(-2px);
}

.article-content, .video-content {
  padding: 16px 16px 0;
}

.article-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.article-main {
  flex: 1;
}

.article-image {
  width: 160px;
  height: 100px;
  flex-shrink: 0;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.article-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
}

.article-desc {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.article-stats {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  margin-top: 12px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 14px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-item i {
  font-size: 14px;
}

.video-preview {
  position: relative;
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
}

.video-preview img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.video-player {
  display: none;
  width: 100%;
  height: 100%;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  color: white;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 使用Font Awesome图标 */

</style>


